/*
 * FileName: 工作经历组件
 * Created Date: 2022-10-17 22:46:26
 * Author: 文初阳
 * -----
 * Last Modified: 2022-10-17 22:46:26
 * Modified By: 文初阳
 */

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, DatePicker, Form, Input } from 'antd';
import React from 'react';
import styles from './WorkExperiences.module.scss';

const { TextArea } = Input;
const { RangePicker } = DatePicker;

const WorkExperiences: React.FC = () => {
    return (
        <div className={styles.wrapper}>
            <h1>工作经历</h1>
            <Form.List name="workExperiences">
                {(fields, { add, remove }, { errors }) => (
                    <div className={styles.itemWrapper}>
                        {fields.map(({ key, name }) => (
                            <div className={styles.item} key={key}>
                                <div className={styles.workTitle}>
                                    <Form.Item name={[name, 'date']} noStyle>
                                        <RangePicker picker="month" />
                                    </Form.Item>
                                    <Form.Item name={[name, 'company']} noStyle>
                                        <Input placeholder="所在公司" />
                                    </Form.Item>
                                    <Form.Item name={[name, 'position']} noStyle>
                                        <Input placeholder="职位" />
                                    </Form.Item>
                                    <MinusCircleOutlined
                                        className={`dynamic-delete-button ${styles.iconDelete}`}
                                        onClick={() => remove(name)}
                                    />
                                </div>
                                <div className={styles.workContentWrapper}>
                                    <div className={styles.contentTitle}>工作内容：</div>
                                    <Form.List name={[name, 'duty']}>
                                        {(dutyFields, { add: addDuty, remove: removeDuty }, { errors: dutyErrors }) => (
                                            <div className={styles.contentWrapper}>
                                                {dutyFields.map(({ key: dutyKey, name: dutyName, ...restField }) => (
                                                    <div className={styles.content} key={dutyKey}>
                                                        <div className={styles.top}>
                                                            <Form.Item
                                                                {...restField}
                                                                name={[dutyName, 'title']}
                                                                noStyle
                                                            >
                                                                <Input placeholder="主标题，如：x项目" />
                                                            </Form.Item>
                                                            <Form.Item
                                                                {...restField}
                                                                name={[dutyName, 'subtitle']}
                                                                noStyle
                                                            >
                                                                <Input placeholder="副标题，如：x技术/主负责人/策划" />
                                                            </Form.Item>
                                                            <MinusCircleOutlined
                                                                className={`dynamic-delete-button ${styles.iconDelete}`}
                                                                onClick={() => removeDuty(dutyName)}
                                                            />
                                                        </div>
                                                        <div className={styles.detailWrapper}>
                                                            <div className={styles.detailTitle}>工作内容细节：</div>
                                                            <Form.List name={[dutyName, 'detail']}>
                                                                {(
                                                                    detailFields,
                                                                    { add: addDetail, remove: removeDetail },
                                                                    { errors: detailErrors }
                                                                ) => (
                                                                    <div className={styles.detailItemWrapper}>
                                                                        {detailFields.map(
                                                                            ({
                                                                                key: detailKey,
                                                                                name: detailName,
                                                                                ...restField
                                                                            }) => (
                                                                                <div
                                                                                    className={styles.detailItem}
                                                                                    key={detailKey}
                                                                                >
                                                                                    <div className={styles.label}>
                                                                                        <Form.Item
                                                                                            {...restField}
                                                                                            noStyle
                                                                                            name={[detailName, 'label']}
                                                                                        >
                                                                                            <Input placeholder="标题，如：技术栈" />
                                                                                        </Form.Item>
                                                                                        <MinusCircleOutlined
                                                                                            className={`dynamic-delete-button ${styles.iconDelete}`}
                                                                                            onClick={() =>
                                                                                                removeDetail(detailName)
                                                                                            }
                                                                                        />
                                                                                    </div>
                                                                                    <div className={styles.value}>
                                                                                        <Form.Item
                                                                                            {...restField}
                                                                                            noStyle
                                                                                            name={[detailName, 'value']}
                                                                                        >
                                                                                            <TextArea
                                                                                                rows={3}
                                                                                                placeholder="内容，如：使用了React框架。可使用‘<cb> 蓝色强调 </cb>’ 和 ‘<cr> 红色强调 </cr>’ 来做强调"
                                                                                            />
                                                                                        </Form.Item>
                                                                                    </div>
                                                                                </div>
                                                                            )
                                                                        )}
                                                                        <Form.Item noStyle>
                                                                            <Button
                                                                                type="dashed"
                                                                                onClick={() => addDetail()}
                                                                                style={{
                                                                                    width: '48%',
                                                                                }}
                                                                                icon={<PlusOutlined />}
                                                                            >
                                                                                新增一条工作内容细节描述
                                                                            </Button>
                                                                            <Form.ErrorList errors={detailErrors} />
                                                                        </Form.Item>
                                                                    </div>
                                                                )}
                                                            </Form.List>
                                                        </div>
                                                    </div>
                                                ))}
                                                <Form.Item noStyle>
                                                    <Button
                                                        type="dashed"
                                                        onClick={() => addDuty()}
                                                        style={{
                                                            width: '60%',
                                                        }}
                                                        icon={<PlusOutlined />}
                                                    >
                                                        新增一条工作内容
                                                    </Button>
                                                    <Form.ErrorList errors={dutyErrors} />
                                                </Form.Item>
                                            </div>
                                        )}
                                    </Form.List>
                                </div>
                            </div>
                        ))}
                        <Form.Item noStyle>
                            <Button
                                type="dashed"
                                onClick={() => add()}
                                style={{
                                    width: '60%',
                                }}
                                icon={<PlusOutlined />}
                            >
                                新增一条工作经历
                            </Button>
                            <Form.ErrorList errors={errors} />
                        </Form.Item>
                    </div>
                )}
            </Form.List>
        </div>
    );
};
export default WorkExperiences;
